import React from 'react';
import MainUI from '../../components/layout/MainUI';
import  AddRoleModalUI from '../../components/system/role/AddRoleModalUI';
import  EditRoleModalUI from '../../components/system/role/EditRoleModalUI';
import {connect} from 'dva';
import {Breadcrumb, Table, Button, Row, Col,message,Icon,Popconfirm,Card,Tree} from 'antd';
const TreeNode=Tree.TreeNode;

class Role extends React.Component {
  state = {
    columns: [
      {title: '名称', dataIndex: 'name',},
    ],
    editRow:{},
    addModalChanged: false,
    editModalChanged: false,
    cardVisibale:false,

  };
  search = () => {
    this.props.dispatch({
      type: 'role/getAllRoles'
    });
  };

  showModal = (opt) => {
    if(opt==='add'){
      this.state.addModalChanged = !this.state.addModalChanged;
    }else if(opt==='edit'){
      const selectRow = this.props.selectRow;
      if (null == selectRow || selectRow == undefined) {
        message.warning('请选择一条数据！');
        return;
      }
      this.state.editModalChanged = !this.state.editModalChanged;
      this.state.editRow=selectRow;
    }
    this.setState(this.state);
  };
  rowSelection = () => {
    return {
      type:'radio',
      onSelect: (record, selected, selectedRows) => {
        this.state.cardVisibale=true;
        this.props.dispatch({
          type:'role/updateSelectRow',
          payload:record
        });
        this.props.dispatch({
          type:'role/getRoleResource',
          payload:{roleId:record.id}
        });
      },
    }

  };
  deleteRole=()=>{
    const selectRow = this.props.selectRow;
    if (null == selectRow || selectRow== undefined) {
      message.warning('请选择需要删除的数据！');
    }else{
      const ids=[];
      ids.push(selectRow.id);
      this.props.dispatch({
        type:'role/deleteRole',
        payload:{ids:ids}
      });
      this.props.dispatch({
        type:'role/updateSelectRow',
        payload:undefined
      });
    }
  };
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode style={{height:'100%'}} title={<span><Icon type={item.menuType=='dir'?'folder':item.menuType=='page'?'link':'key'} /><span> {item.text}</span></span>} key={item.id}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode style={{height:'100%'}} title={<span><Icon type={item.menuType=='dir'?'folder':item.menuType=='page'?'link':'key'} /><span> {item.text}</span></span>} key={item.id} />;
    });
  };
  onCheck = (checkedKeys) => {
    this.props.dispatch({
      type:'role/updateCheckedKey',
      payload:{checkedKeys:checkedKeys,roleId:this.props.selectRow.id}
    });
  };
  render() {
    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>系统管理</Breadcrumb.Item>
          <Breadcrumb.Item> 角色管理</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <Row>
            <Col span={24} style={{textAlign: 'right'}}>
              <Button type="primary" icon="retweet" onClick={this.search}>刷新</Button>
            </Col>
          </Row>
          <Row>
            <Col span={4}>
              <Button  type='primary' onClick={()=>{this.showModal('add')}}>新增</Button><span className="ant-divider"/>
              <Button  onClick={() => {this.showModal('edit')}}>编辑</Button><span className="ant-divider"/>
              <Popconfirm title="你确定要进行删除操作?" onConfirm={this.deleteRole}  okText="是" cancelText="否">
                <Button  type='danger' >删除</Button>
              </Popconfirm>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <Table bordered={true} rowSelection={this.rowSelection()} rowKey='id' style={{marginTop: '10px'}}
                     columns={this.state.columns}
                     dataSource={this.props.roles} pagination={false}/>
            </Col>
            <Col span={1}/>
            <Col span={15}>
              <Card title="关联的资源" bordered={true} noHovering={true} style={{width: 500,marginTop:'10px' }}>
                {
                  this.state.cardVisibale?<Tree
                    checkable
                    defaultExpandAll={true}
                    style={{height:'100%'}}
                    checkStrictly={true}
                    onCheck={this.onCheck}
                    checkedKeys={this.props.selectRoleresource}
                  >
                    {this.renderTreeNodes(this.props.roleResource)}
                  </Tree>:''
                }
              </Card>
            </Col>
          </Row>
          {
            <AddRoleModalUI addModalChanged={this.state.addModalChanged}/>
          }
          {
            <EditRoleModalUI editModalChanged={this.state.editModalChanged} editRow={this.state.editRow}/>
          }
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    roles: state.role.roles,
    roleResource:state.role.roleResource,
    selectRoleresource:state.role.selectRoleresource,
    selectRow:state.role.selectRow,
  }
}

export default connect(mapStateToProps)(Role);
